<template>
  <div class="dashboard-editor-container">
    <el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;">
      <span>今日应用点击次数排行</span>
      <bar-chart :chart-data="todayData"></bar-chart>
    </el-row>
    <el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;">
      <span>昨日应用点击次数排行</span>
      <bar-chart :chart-data="yesterdayData"></bar-chart>
    </el-row>
    <el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;">
      <span>近七日应用点击次数排行</span>
      <bar-chart :chart-data="sevenDayData"></bar-chart>
    </el-row>
  </div>
</template>

<script>
  import BarChart from '../components/BarChart'
  import { getAppMotionSortData } from '@/api/monitor'

  export default {
    components: {
      BarChart
    },
    data() {
      return {
        yesterdayData: {
          counts: [],
          names: []
        },
        todayData: {
          counts: [],
          names: []
        },
        sevenDayData: {
          counts: [],
          names: []
        }
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        var todayParams = {
          type: 1,
          filter: true,
          limit: 20
        }
        getAppMotionSortData(todayParams).then(response => {
          const result = response.data
          this.todayData = {
            counts: [],
            names: []
          }
          result.forEach(object => {
            this.todayData.counts.push(object.count)
            this.todayData.names.push(object.name)
          })
        })
        var yesterdayParams = {
          type: 2,
          filter: true,
          limit: 20
        }
        getAppMotionSortData(yesterdayParams).then(response => {
          const result = response.data
          this.yesterdayData = {
            counts: [],
            names: []
          }
          result.forEach(object => {
            this.yesterdayData.counts.push(object.count)
            this.yesterdayData.names.push(object.name)
          })
        })
        var sevendayParams = {
          type: 4,
          filter: true,
          limit: 20
        }
        getAppMotionSortData(sevendayParams).then(response => {
          const result = response.data
          this.sevenDayData = {
            counts: [],
            names: []
          }
          result.forEach(object => {
            this.sevenDayData.counts.push(object.count)
            this.sevenDayData.names.push(object.name)
          })
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 30px;
    background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 15px 15px 0;
  }
  }
</style>
